<template>
  <div>
    <div class="searchInput">
      <div class="left">
        <img
          src="https://pic.imgdb.cn/item/61d95c212ab3f51d91fe230c.png"
          alt=""
          class="logo"
        />
        <img
          src="https://pic.imgdb.cn/item/61d95c212ab3f51d91fe230c.png"
          class="logo"
        />
        <img
          src="https://pic.imgdb.cn/item/61d95c212ab3f51d91fe230c.png"
          class="logo"
        />
        <img
          src="https://pic.imgdb.cn/item/61d95c212ab3f51d91fe230c.png"
          class="logo"
        />
        <img
          src="https://pic.imgdb.cn/item/61d95c212ab3f51d91fe230c.png"
          class="logo"
        />
        <img
          src="https://pic.imgdb.cn/item/61d95c212ab3f51d91fe230c.png"
          class="logo"
        />
        <img
          src="https://pic.imgdb.cn/item/61d95c212ab3f51d91fe230c.png"
          class="logo"
        />
      </div>
      <div class="right">
        <input
          placeholder="小米"
          type="text"
          v-model="search"
          @keyup.enter="gosearch"
        />
        <span class="iconfont" @click="gosearch"></span>
      </div>
    </div>
    <el-pagination
      class="nav"
      background
      :page-size="20"
      layout="prev, pager, next"
      :total="total"
      @next-click="next"
      @current-change="currentChange"
      @prev-click="pre"
    >
    </el-pagination>
    <div class="main">
      <div
        class="item"
        v-for="item in goodslist"
        :key="item.goods_id"
        @click="godetail(item.goods_id)"
      >
        <img :src="item.goods_small_logo" alt="" @error="reload" />
        <div class="title">{{ item.goods_name }}</div>
        <div class="price">￥:{{ item.goods_price }}</div>
        <div class="num">商品数:{{ item.goods_number }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { qsearch } from "../request/goods/goods";
import { search } from "../request/goods/goods";
import Inputgoods from "./inputgoods.vue";
import Navlist from "./navlist.vue";
export default {
  components: { Navlist, Inputgoods },
  name: "VueGoodslist",

  data() {
    return {
      total: 1,
      pagenum: 1,
      goodslist: [],
      search: "",
      list: [],
      data:{},
    };
  },

  mounted() {
    this.init();
  },

  methods: {
      gosearch(){
            if(this.search==""){
                this.search="小米";
            }
            this.data={query:this.search}
            search({query:this.search})
        .then((res) => {
          this.goodslist = res.message.goods;
          this.total = res.message.total;
          this.pagenum=1;
        })
        .catch((err) => {});      
           this.search="";
        },
    //处理参数
    handleUrl() {
      var geturl = this.$route.query.url;
      if (geturl.includes("?")) {
        geturl = geturl.slice(geturl.indexOf("?") + 1);
        geturl = geturl.split("=");
        var data = {};
        data[geturl[0]] = geturl[1];
      } else {
        var data = {};
        data["cid"] = geturl;
      }
     this.data=data;
    },
    //
    async init() {
       await this.handleUrl();
      this.data["pagenum"] = this.pagenum;
      search(this.data)
        .then((res) => {
          this.goodslist = res.message.goods;
          this.total = res.message.total;
        })
        .catch((err) => {});
    },
    //
    ininit(){
      this.data["pagenum"] = this.pagenum;
      search(this.data)
        .then((res) => {
          this.goodslist = res.message.goods;
          this.total = res.message.total;
        })
        .catch((err) => {});
    },
    //跳转详情
    godetail(id) {
      this.$router.push({
        path: "/detail",
        query: { id: id },
      });
    },
    //下一页
    pre() {
      this.pagenum--;
      this.ininit();
    },
    currentChange(cpage) {
      this.pagenum = cpage;
      this.ininit();
    },
    next() {
      this.pagenum++;
      this.ininit();
    },
    //处理图片
    reload() {
      event.target.src =
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201706%2F19%2F20170619001755_dtHZv.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641354085&t=7e7fccd04090184415674d69dcf4a803";
    },
  },
};
</script>
<style  scoped>
.main {
  width: 1200px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-bottom: 100px;
}
.main .item {
  overflow: hidden;
  width: 358px;
  border: 1px solid #d8d8d8;
  padding: 5px;
  margin-top: 20px;
  color: #9b9b9b;
  line-height: 20px;
}
.main .item:hover {
  border: 1px solid #f00;
}
.main .item .price {
  font-size: 18px;
  color: #fd3f31;
}
.main .item .title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.main .item img {
  width: 400px;
  height: 400px;
}
.nav {
  width: fit-content;
  height: fit-content;
  margin: 10px auto 0;
}
* {
  padding: 0;
  margin: 0;
}
.searchInput {
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}
.searchInput .logo {
  height: 46px;
}
.searchInput input {
  width: 700px;
  height: 40px;
  border: 3px solid #f00;
  line-height: 46px;
  text-indent: 2em;
}
::-webkit-input-placeholder {
  text-indent: 2em;
}

.searchInput .iconfont {
  height: 46px;
  width: 46px;
  display: inline-block;
  background-color: #f00;
  vertical-align: middle;
  background-image: url(https://pic.imgdb.cn/item/61d954c32ab3f51d91f855cd.png);
  background-repeat: no-repeat;
  background-position: center;
  box-sizing: border-box;
  margin-left: -10px;
}
</style>